<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<!--    elementplus-->
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css">-->
    <link rel="stylesheet" th:href="@{/js/element-plus/index.css}" href="/js/element-plus/index.css">

</head>

<body>
<div id="app" class="demo">

    <div class="common-layout">
        <el-container>
            <el-header>
                <div th:class="left">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                        <el-breadcrumb-item
                        ><a href="/">promotion management</a></el-breadcrumb-item
                        >
                        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="userInfo">
                    <span th:text="'欢迎来到:'+${name}"></span>
                    <el-avatar shape="square" :size="50" :fit="contain" :src="url" />
                </div>

            </el-header>
            <el-container>
                <el-aside >

                    <el-menu
                            active-text-color="#ffd04b"
                            background-color="#545c64"
                            class="el-menu-vertical-demo"
                            default-active="2"
                            text-color="#fff"
                            @open="handleOpen"
                            @close="handleClose"
                    >
                        <el-sub-menu index="100">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>Navigator One</span>
                            </template>
                            <el-menu-item-group title="Group One">
                                <el-menu-item index="1-1">item one</el-menu-item>
                                <el-menu-item index="1-2">item two</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group Two">
                                <el-menu-item index="1-3">item three</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="1-4">
                                <template #title>item four</template>
                                <el-menu-item index="1-4-1">item one</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <el-menu-item index="2">
                            <el-icon><icon-menu /></el-icon>
                            <span>Navigator Two</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <el-icon><document /></el-icon>
                            <span>Navigator Three</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <el-icon><setting /></el-icon>
                            <span>Navigator Four</span>
                        </el-menu-item>
                    </el-menu>

                </el-aside>
                <el-container>
                    <el-main>
                        <div class="custom-table">
                            <table>
                                <thead>
                                <tr>
                                    <th>产品名</th>
                                    <th>价格</th>
                                    <th>库存</th>
                                    <th>简介</th>
                                    <!-- 其他表头列 -->
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in productList" :key="item.id">
                                    <td>{{ item.productName }}</td>
                                    <td>{{ item.price }}</td>
                                    <td>{{ item.stock }}</td>
                                    <td>{{ item.introduction }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <el-pagination
                                v-model:current-page="currentPage4"
                                v-model:page-size="pageSize4"
                                :page-sizes="[100, 200, 300, 400]"
                                :small="small"
                                :disabled="disabled"
                                :background="background"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="400"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</div>
<!--<script th:src="@{/js/vue.global.min.js}"></script>-->
<!--&lt;!&ndash;    <script src="https://cdn.staticfile.org/axios/1.5.0/axios.min.js"></script>&ndash;&gt;-->
<!--<script th:src="@{/js/axios.min.js}"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js"></script>-->
<script th:src="@{/js/vue.global.min.js}" src="/js/vue.global.min.js"></script>
<script th:src="@{/js/axios.min.js}"  src="/js/axios.min.js"></script>
<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-plus"></script>-->
<script th:src="@{/js/element-plus/index.full.js}" src="/js/element-plus/index.full.js"></script>
<script>
    const HelloVueApp = {
        data() {
            return {
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                currentPage4:1,
                pageSize4:10,
                productList: [],
                tableData :[
                    {
                        date: '2016-05-03',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-02',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-04',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-01',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                ]
            }
        },
        methods: {
             handleSizeChange(val) {
                console.log(`${val} items per page`)
            },
             handleCurrentChange(val){
                console.log(`current page: ${val}`)
            },
            handleOpen(key,keyPath){
                console.log(key, keyPath)

            },
            handleClose(key,keyPath){
                console.log(key, keyPath)

            },
            doSomething() {
                alert('点击')
            },
            increment() {
                // `this` 指向该组件实例
                this.count++
            },
            decress() {
                // `this` 指向该组件实例
                this.count--
            }
        },
        mounted() {
            axios
                .get('getProductList1')
                .then(response => {
                    debugger
                    console.log(response)
                    this.productList = response.data
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }

    }
    const app = Vue.createApp(HelloVueApp);
    app.use(ElementPlus);
    app.mount("#app");
    // Vue.createApp(HelloVueApp).mount('#app')
</script>
<style>
    .el-header{
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    .el-header .userInfo{
        border: 1px solid red;
        display: flex;
        justify-content: space-between;
        align-items: center;

    }
    /*自定义表格*/
    .custom-table {
        font-family: 'Arial', sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    .custom-table table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
    }

    .custom-table th,
    .custom-table td {
        border: 1px solid #e1e1e1;
        padding: 8px;
        text-align: left;
    }

    .custom-table th {
        background-color: #f2f2f2;
    }

    .custom-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .custom-table tbody tr:hover {
        background-color: #e5e5e5;
    }
    .el-pagination{

        margin-top: 50px;
    }
</style>
</body>

</html>